<template>
    <div class="large-3 medium-4 small-6 cell cafe-card-container" v-show="show">
        <router-link :to="{name:'cafes',params:{id:cafe.id}}">
            <div class="cafe-card">
                <span class="title">{{cafe.name}}</span>
                <span class="address">
                    <span class="street">{{ cafe.address }}</span>
                    <span class="city">{{ cafe.city }}</span>
                    <span class="state">{{ cafe.state }}</span>
                    <span class="zip">{{ cafe.zip }}</span>
                </span>
            </div>
        </router-link>
    </div>
</template>

<script>
    import {CafeTextFilter} from "../../mixins/filters/CafeTextFilter";
    import {CafeTagsFilter} from "../../mixins/filters/CafeTagsFilter";
    import {CafeBrewMethodsFilter} from "../../mixins/filters/CafeBrewMethodsFilter";
    import {CafeRoasterFilter} from "../../mixins/filters/CafeRoasterFilter";

    import {EventBus} from "../../event-bus";

    export default {
        name: "CafeCard",
        props: [
            'cafe'
        ],
        data() {
            return {
                show: true,
            }
        },
        mounted() {
            EventBus.$on('filters-updated', function (filters) {
                this.processFilters(filters);
            }.bind(this))
        },
        methods: {
            processFilters(filters) {
                var textPassed = false;
                var tagsPassed = false;
                var brewMethodsPassed = false;
                var roasterPassed = false;
                if (filters.text == '' || this.processCafeTextFilter(this.cafe, filters.text)) {
                    textPassed = true;
                }
                if (filters.tags.length == 0 || this.processCafeTagsFilter(this.cafe, filters.tags)) {
                    tagsPassed = true;
                }
                if (filters.brew_methods.length == 0 || this.processCafeBrewMethodsFilter(this.cafe, filters.brew_methods)) {
                    brewMethodsPassed = true;
                }
                if (!filters.roaster || this.processCafeRoasterFilter(this.cafe)) {
                    roasterPassed = true;
                }
                if (textPassed && tagsPassed && brewMethodsPassed && roasterPassed) {
                    this.show = true;
                } else {
                    this.show = false;
                }
            }
        },
        mixins: [
            CafeTextFilter,
            CafeTagsFilter,
            CafeBrewMethodsFilter,
            CafeRoasterFilter,
        ],
    }
</script>

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    div.cafe-card {
        border-radius: 5px;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
        padding: 15px 5px 5px 5px;
        margin-top: 20px;
        cursor: pointer;
        -webkit-transform: scaleX(1) scaleY(1);
        transform: scaleX(1) scaleY(1);
        transition: .2s;

        span.title {
            display: block;
            text-align: center;
            color: black;
            font-size: 18px;
            font-weight: bold;
            font-family: 'Lato', sans-serif;
        }

        span.address {
            display: block;
            text-align: center;
            margin-top: 5px;
            color: $grey;
            font-family: 'Lato', sans-serif;

            span.street {
                font-size: 14px;
                display: block;
            }

            span.city {
                font-size: 14px;
            }

            span.state {
                font-size: 14px;
            }

            span.zip {
                font-size: 14px;
                display: block;
            }
        }

        span.liked-meta {
            color: $grey;
            font-size: 10px;
            margin-left: 5px;
            margin-right: 3px;

            img {
                width: 10px;
            }
        }

        &:hover {
            -webkit-transform: scaleX(1.041) scaleY(1.041);
            transform: scaleX(1.041) scaleY(1.041);
            transition: .2s;
        }
    }
</style>
